<template>
  <j-modal
    :title="title"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <div
      v-infinite-scroll="handleInfiniteOnLoad"
      :scrollable="true"
      class="demo-infinite-container"
      :infinite-scroll-disabled="busy"
      :infinite-scroll-distance="10"
      v-if="model && model.length > 0"
    >
      <a-collapse :bordered="true" :accordion="true" @change="panelChange">
        <a-collapse-panel key="1" v-for="item in model" :key="item.id">
          <template v-slot:header>
            <div>
              <div>{{ item.typeName }}</div>
              <div>{{ item.createTime }}</div>
            </div>
            <div>
              <div :style="{ color: billTypetype[item.billType], textAlign: 'end' }">
                {{ item.billType == 2 ? '-' : '+' }}<span>{{ item.totalAmount }}</span>
              </div>
              <div>
                余额：<span style="color: blueviolet">{{ item.afterAmount }}</span>
              </div>
            </div>
          </template>
          <div style=""><span v-html="subtypeList.title"></span>：<span v-html="subtypeList.amount"></span></div>
          <div v-for="item in subtypeList.List" :key="item"><span v-if="Object.keys(item)[0]"><span v-html="Object.keys(item)[0]"></span>：<span v-html="item[Object.keys(item)[0]]"></span></span></div>
        </a-collapse-panel>
      </a-collapse>
     
    </div>
    <div v-else>暂无账单记录</div>
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import moment from 'moment'
import infiniteScroll from 'vue-infinite-scroll'
export default {
  name: 'XhdjUserInfoModal',
  directives: { infiniteScroll },
  data() {
    return {
      title: '操作',
      visible: false,
      model: [],
      loading: false,
      busy: false,
      models: {
        pageNo: 1,
        pageSize: 100,
        userId: null,
        userType: 0,
      },
      subtypeList: {},
      billTypetype: {
        2: 'green',
        1: 'red',
      },
      confirmLoading: false,
      validatorRules: {
        billType: [{ required: true, message: '请选择资金类型!' }],
        amount: [{ required: true, message: '请输入金额!' }],
      },
      url: {
        lists: '/finance/sysxhdjFundsLog/queryBackPageList',
        edits: '/finance/sysxhdjFundsLog/fundsDetail',
      },
    }
  },
  beforeMount() {
    getAction(this.url.lists, this.models).then((res) => {
      if (res.code === 200) {
        this.model = res.result.records
      }
    })
  },
  created() {},
  methods: {
    add() {
      //初始化默认值
      this.edit({})
    },
    edit(record) {
      this.models.userId = record.id
      this.visible = true
      this.init()
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.model = []
      // this.$refs.form.clearValidate()
    },
    init() {
      getAction(this.url.lists, this.models).then((res) => {
        if (res.code === 200) {
          this.model = res.result.records
        }
      })
    },
    panelChange(id) {
      if (id) {
        getAction(this.url.edits, { id }).then((res) => {
          if (res.code === 200) {
            this.subtypeList = res.result
           
          }
        })
      }
    },
    handleInfiniteOnLoad() {
      debugger
      const data = this.model
      this.loading = true
      if (data.length > 14) {
        this.$message.warning('Infinite List loaded all')
        this.busy = true
        this.loading = false
        return
      }
      // this.fetchData(res => {
      //   this.data = data.concat(res.results);
      //   this.loading = false;
      // });
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'post'
          }
          this.$confirm({
            content: ` 请确认充值金额${this.model.amount}元？`,
            onOk: () => {
              httpAction(httpurl, this.model, method)
                .then((res) => {
                  if (res.success) {
                    that.$message.success(res.message)
                    that.$emit('ok')
                  } else {
                    that.$message.warning(res.message)
                  }
                })
                .finally(() => {
                  that.confirmLoading = false
                  that.close()
                })
            },
          })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-collapse-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

</style>
<style>
.demo-infinite-container {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: auto;
  overflow-y:auto;
  padding: 8px 12px;
  max-height: 500px;
}
/* .demo-loading-container {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
} */
</style>
